<template>
    <div>
       <el-form :model="form" :rules="rules" label-position="right" ref="form" label-width="160px">
			
		   <el-form-item label="会员帐号：" prop="cm_username">
			   <el-col :span="8">
				   <el-input v-model="form.cm_username" placeholder="请输入会员帐号"></el-input>
			   </el-col>
		   </el-form-item>

           <el-form-item label="会员密码：" prop="cm_password">
			   <el-col :span="8">
				   <el-input v-model="form.cm_password" placeholder="请输入会员密码"></el-input>
			   </el-col>
		   </el-form-item>

           <el-form-item label="会员昵称：" prop="cm_nickname">
			   <el-col :span="8">
				   <el-input v-model="form.cm_nickname" placeholder="请输入会员昵称"></el-input>
			   </el-col>
		   </el-form-item>

           <el-form-item label="会员QQ：" prop="cm_qq">
			   <el-col :span="8">
				   <el-input v-model="form.cm_qq" placeholder="请输入会员QQ"></el-input>
			   </el-col>
		   </el-form-item>

           <el-form-item label="会员微信：" prop="cm_weixin">
			   <el-col :span="8">
				   <el-input v-model="form.cm_weixin" placeholder="请输入会员微信"></el-input>
			   </el-col>
		   </el-form-item>

           <el-form-item label="会员手机号：" prop="cm_phone">
			   <el-col :span="8">
				   <el-input v-model="form.cm_phone" placeholder="请输入会员手机号"></el-input>
			   </el-col>
		   </el-form-item>
		   
           <el-col :span="24" v-if="customModelData.length > 0">
                <div class="customFieldInput">
                    自定义模型设置（该部分为自定义模型部分，如果没有自定义模型，则不会显示）
                </div>
           </el-col>
           <el-form-item :label="'自定义模型 ' + (index+1) + ' :'" v-for="item,index in customModelData">
			   <el-col :span="8">
				   <el-input type="textarea" rows="4" v-model="form[item.COLUMN_NAME]" :placeholder="item.COLUMN_COMMENT + '，数据类型：' + (item.DATA_TYPE == 'varchar' ? '文本' : '数字')"></el-input>
			   	   <span class="fieldCommentHint">{{item.COLUMN_COMMENT}}</span>
			   </el-col>
		   </el-form-item>

		   <el-form-item>
			   <el-button type="primary" @click="submitForm('form')">提交</el-button>
			   <el-button @click="resetForm">重置</el-button>
		   </el-form-item>
		   
		</el-form>
    </div>
</template>

<script>
    import { mapState,mapMutations } from 'vuex'
    export default {
        //数据源
        data(){
            return {
                rules : {
				   cm_username : [
					   { required: true, message: '请输入会员帐号', trigger: 'blur' }
				   ]
			    }
            }
        },
        //初始化函数
        mounted() {
			//获取自定义模型
			this.getCustomField();
        },
        //计算属性
        computed: {
            ...mapState({ 
				form : state => state.AddMemberModule.form,
				customModelData : state => state.AddMemberModule.customModelData
            })
        },
        //组件方法
        methods: {
			// ...mapMutations()
			getCustomField(){

				var params = {
					// appKey 	  : this.$localData.getEasydCloudAppKey(),
					appKey 	  : 'easyd_cms',
					tableName : "easyd_cms_member"
				}

				this.$myLoading.startLoading()
                this.$http.postHttp(
                    this.$API.modelManagerGetCustomModel,
					params,
					rs => {
						this.$store.commit('AddMemberModule/updateCustomModelData',rs)
                        this.$myLoading.endLoading()
                    }
                )
			},
            submitForm(form){
				
				this.$refs[form].validate((valid) => {

					if (valid) {

						//添加新增时间
						this.form.cm_create_time = this.$common.currentTime()

						this.$myLoading.startLoading()
						this.$http.postHttp(
						this.$API.cmsMemberAdd,
						this.form,
							rs => {
								this.$myLoading.endLoading()
								this.$myPop.SuccessMessage()	
								this.$store.commit('AddMemberModule/clearForm');
							}
						)
					}

				})
				
			},
			
			resetForm(){
				this.$store.commit('AddMemberModule/clearForm');
			}
        }
    }
</script>

<style lang="stylus" scoped>
@import '~PUBLIC_CSS';
.customFieldInput {
    width 100%
    height 40px
    background #eee
    margin-bottom 30px
    padding-left 20px
    box-sizing border-box
}

.fieldCommentHint {
    color red
}
</style>